<template>
	<view class="register-content">
		<form class="from" @submit='submit'>
			<s-input placeholder="用户账号" name='username' required v-model='form.username'>
			</s-input>
			<s-input placeholder="用户昵称" name='nickname' v-model='form.nickname'>
			</s-input>
			<s-input placeholder="密码" name='password' required v-model='form.password' type="password">
			</s-input>
			<s-input placeholder="确认密码" name='password2' required v-model='form.password2' type="password">
			</s-input>
			<button class="submit-btn" form-type="submit">注册</button>
		</form>
		<view class="btn" @click="turnover">
			<sxran-im-text class="" text='登录' size="14" type='primary'></sxran-im-text>
		</view>
	</view>
</template>

<script>
	import SInput from './input.vue';
	export default {
		name: 'register',
		components: {
			SInput
		},
		data() {
			return {
				form: {
					nick: '',
					nickname: '',
					password: '',
					password2: '',
					userId: '',
					username: ''
				}
			}
		},
		methods: {
			turnover() {
				this.$emit('turnover')
			},
			validatePassword(value) {
				const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
				return passwordRegex.test(value);
			},
			validateConfirmPassword(pas, pas1) {
				return pas === pas1;
			},
			submit(event) {
				const {
					value
				} = event.detail;
				console.log(value.username, this.form)
				if (!value.username) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					})
					return;
				}
				if (!value.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return;
				}
				if (!this.validatePassword(value.password)) {
					uni.showToast({
						title: '密码必须至少包含8个字符，包括大写字母、小写字母、数字和特殊字符。',
						icon: 'none'
					})
					return;
				}
				if (!value.password2) {
					uni.showToast({
						title: '请再次输入确认密码',
						icon: 'none'
					})
					return;
				}
				
				if (!this.validateConfirmPassword(value.password, value.password2)) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					})
					return;
				}

				uni.$Im.register(uni.$Im.config.api + '/api/user/register', {
					...value,
					userId: this.form.username,
					nick: this.form.nickname
				}).then(res => {
					uni.showToast({
						title: '注册成功',
						icon: 'success'
					})
					this.$emit('ok')
				});

				// this.$emit('submit', {
				// 	...value,
				// 	userId: this.form.username,
				// 	nick: this.form.nickname
				// })

			}
		}
	}
</script>

<style scoped lang="scss">
	.register-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.form {}

		.submit-btn {
			padding: 0;
			background: rgba(255, 255, 255, .2);
			border: none;
			border-radius: 35px;
			box-shadow: 0 25px 45px rgba(0, 0, 0, .5);
			border-right: 1px solid rgba(255, 255, 255, .2);
			border-bottom: 1px solid rgba(255, 255, 255, .2);
			// letter-spacing: 20px;
			box-shadow: 2px 3px rgba(0, 0, 0, 0.03);

			&::after {
				border: none;
			}
		}

		.btn {
			margin-top: 20px;
			// letter-spacing: 20px;
			cursor: pointer;
		}

	}
</style>